<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: deer
  Date: 2021/5/7
  Time: 20:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>分页查询用户</title>
    <%-- 引入JQ和Bootstrap --%>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="static/js/jquery.min.js"></script>
    <link href="static/css/bootstrap.css/bootstrap.min.css" rel="stylesheet">
    <script src="static/js/bootstrap.js/bootstrap.min.js"></script>
    <style>
        body{
            background-image: url(static/img/olia-gozha-J4kK8b9Fgj8-unsplash.jpg);
            background-size: cover;
            height:100%;
            width: 100%;
            background-repeat: no-repeat;
        }</style>

    <script>
        $(function () {
            $("ul.pagination li.disabled a").click(function () {
                return false;
            });
        });
    </script>
    <style>
        div.listDIV {
            width: 1000px;
            margin: 0 0;
        }
        nav.pageDIV {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="listDIV">
    <table class="table table-striped table-bordered table-hover table-condensed">

        <caption>用户信息记录 - 共${page.total}条记录</caption>
        <thead>
        <tr class="success">
            <th>用户名</th>
            <th>书名</th>
            <th>ISBN</th>
            <th>借书时间</th>
            <th>还书时间</th>
        </tr>
        </thead>
        <tbody><c:forEach items="${records}" var="s" varStatus="status">
            <tr>
                <td>${s.user_name}</td>
                <td>${s.book_name}</td>
                <td>${s.book_ISBN}</td>
                <td>${s.borrow_date}</td>
                <td>${s.return_date}</td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>
<nav class="pageDIV">
    <ul class="pagination">
        <li <c:if test="${!page.hasPreviouse}">class="disabled"</c:if>>
            <a href="?page.start=0">
                <span>«</span>
            </a>
        </li>

        <li <c:if test="${!page.hasPreviouse}">class="disabled"</c:if>>
            <a href="?page.start=${page.start-page.count}">
                <span>‹</span>
            </a>
        </li>

        <c:forEach begin="0" end="${page.totalPage-1}" varStatus="status">

            <c:if test="${status.count*page.count-page.start<=30 && status.count*page.count-page.start>=-10}">
                <li <c:if test="${status.index*page.count==page.start}">class="disabled"</c:if>>
                    <a
                            href="?page.start=${status.index*page.count}"
                            <c:if test="${status.index*page.count==page.start}">class="current"</c:if>
                    >${status.count}</a>
                </li>
            </c:if>
        </c:forEach>

        <li <c:if test="${!page.hasNext}">class="disabled"</c:if>>
            <a href="?page.start=${page.start+page.count}">
                <span>›</span>
            </a>
        </li>
        <li <c:if test="${!page.hasNext}">class="disabled"</c:if>>
            <a href="?page.start=${page.last}">
                <span>»</span>
            </a>
        </li>
    </ul>
</nav>
</body>
</html>
